<template>
  <div class="number-wrap flex align-center">
    <div class="prepend" v-if="prepend">{{ prepend }}</div>
    <el-input-number v-model="minVal" :min="min" :max="max" :controls="false" :precision="precision" @blur="handleCheckMin" :placeholder="placeholder" />
    <!-- <span class="text-[#999]">→</span> -->
    <span class="text-[#333] flex items-center"><svg-icon icon-class="qujian" class="mr-[4px] text-[16px]" /> </span>
    <el-input-number v-model="maxVal" :min="min" :max="max" :controls="false" :precision="precision" @blur="handleCheckMax" :placeholder="placeholder" />
    <div class="suffix" v-if="suffix">{{ suffix }}</div>
  </div>
</template>
<script setup>
import { ref } from "vue"
const props = defineProps({
  value: { type: Object, default: () => ({}) },
  precision: { type: Number, default: 0 },
  suffix: { type: String, default: "" },
  prepend: { type: String, default: "" },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 9999999 },
  placeholder: { type: String, default: "请输入" },
})

const minVal = ref()
const maxVal = ref()

const emit = defineEmits(["input"])

const handleCheckMin = () => {
  const val = minVal.value
  if (!val) return
  if (val > maxVal.value) {
    maxVal.value = val
  }
}

const handleCheckMax = () => {
  const val = maxVal.value
  if (!val && val != 0) return
  if (val < minVal.value) {
    minVal.value = val
  }
}

watch([minVal, maxVal], () => {
  emit("input", { min: minVal.value, max: maxVal.value })
})

watch(
  () => props.value,
  (val) => {
    minVal.value = val?.min
    maxVal.value = val?.max
  }
)
</script>
<style lang="scss" scoped>
.number-wrap {
  border: 1px solid var(--base-border-color);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
  .prepend {
    font-size: 14px;
    // color: #3a4259;
    line-height: 20px;
    padding: 0 20px;
    min-width: 40px;
    // background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--base-border-color);
  }
  .suffix {
    font-size: 14px;
    // color: #3a4259;
    line-height: 20px;
    padding: 0 14px;
    min-width: 40px;
    // background: #fafafa;
    border-left: 1px solid var(--base-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
